<template>
  <div class="wrap">
    <TypeNav />
    <ListContainer />
    <Recommend />
    <Rank />
    <Like @click.native="handle" name='fuyu' ref="child"/> 
    <Floor 
    v-for="(floor,index) in floorDate" 
    :key="index" 
    :floorDate='floor'
    />
    <Brand />
    <SlotO :todo='todos'>
      <template slot-scope="scope">
        <span :class="[scope.ele.iscomplete?'active':'blue']">
          {{scope.ele.text}}
        </span>
      </template>
    </SlotO>
  </div>
</template>
<script>
import ListContainer from "@/pages/Home/ListContainer";
import Recommend from "@/pages/Home/Recmmend";
import Rank from "@/pages/Home/Rank";
import Like from "@/pages/Home/Like";
import Floor from "@/pages/Home/Floor";
import Brand from "@/pages/Home/Brand";
import SlotO from '@/pages/Home/slotO'
import { mapState } from "vuex";
export default {
  name: "home",
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand,
    SlotO
  },
  data(){
     return {
       child:'8000',
       todos:[
         {id:1,text:'AAA',iscomplete:false},
         {id:2,text:'BBB',iscomplete:true},
         {id:3,text:'CCC',iscomplete:false},
         {id:4,text:'DDD',iscomplete:true}
       ]
     }
  },
  computed: {
    ...mapState({
      floorDate: (state) => {
        return state.home.floorDate;
      },
    }),
  },
  created() {
    this.$store.dispatch("requireFloor");
  },
  methods:{
    handle(value){
      this.$refs.child.money -= 100
      console.log('handle',this.$refs.child.money)
      console.log(this.$children,'child')
    }
  }
};
</script>
<style scoped lang='less'>
.active{
  color:red;
}
.blue{
  color:blue;
}
</style>